@import "../../common/less/theme";

.index {
	.i-header {
		position  : fixed;
		top       : 0;
		left      : 0;
		width     : 100%;
		z-index   : 1000;
		background: white;

		.h-top {
			display    : flex;
			align-items: center;
			height     : 88rpx;
			padding    : 0 27rpx;

			.t-logo {
				flex-basis   : 160rpx;
				height       : 58rpx;
				box-sizing   : border-box;
				padding-right: 20rpx;

				image {
					width : 100%;
					height: 100%;
				}
			}

			.t-search {
				position     : relative;
				flex         : 1;
				height       : 58rpx;
				border-radius: 5rpx;
				background   : #f4f4f4;

				.s-left {
					position   : absolute;
					top        : 50%;
					left       : 0;
					transform  : translate(0, -50%);
					display    : flex;
          align-items: center;
          border-radius: 10rpx;
					.iconfont {
            font-size: 36rpx;
            color: #909090;
            margin: 0 20rpx;
					}

					.l-text {
            flex: 1;
						white-space: nowrap;
						color      : #c8c8c8;
					}
				}
			}
		}

		.h-bottom {
			width     : 100%;
			overflow-x: hidden;

			.b-tabs {
				white-space: nowrap;
				padding    : 0 30rpx;

				.t-item {
					display    : inline-block;
					height     : 60rpx;
					padding    : 0 17rpx;
					text-align : center;
					line-height: 60rpx;

					text {
						font-weight: 400;
					}

					&-active {
						position: relative;
						color   : #b4282d;

						&::after {
							position     : absolute;
							content      : '';
							bottom       : 0;
							left         : 0;
							width        : 100%;
							height       : 0;
							border-bottom: 2px solid #b4282d;
						}
					}

					&:not(:first-child) {
						margin-left: 63rpx;
					}
				}
			}
		}
	}

	.i-banner {
		padding-top: 148rpx;
		background : white;

		.b-swiper {
			height: 370rpx;

			.s-item {
				position: relative;
				height  : 100%;
				width   : 100%;

				image {
					position : absolute;
					top      : 50%;
					left     : 50%;
					transform: translate(-50%, -50%);
					height   : 100%;
				}
			}
		}
	}

	.i-service {
		display        : flex;
		align-items    : center;
		justify-content: space-around;
		height         : 72rpx;
		padding        : 0 30rpx;
		background     : white;

		.s-item {
			display    : flex;
			align-items: center;

			.iconfont {
				padding-right: 10rpx;
				font-size    : 40rpx;
			}

			.i-text {
				color: @primary-color;
			}
		}
	}

	.i-category {
		display       : flex;
		flex-wrap     : wrap;
		padding-bottom: 52rpx;
		background    : white;

		.c-item {
			display        : flex;
			align-items    : center;
			justify-content: center;
			flex-direction : column;
			width          : 20%;
			height         : 177rpx;

			image {
				display: inline-block;
				width  : 110rpx;
				height : 110rpx;
			}

			text {
				padding-top: 10rpx;
				font-size  : 24rpx;
				color      : #333333;
			}
		}
	}

	.i-flash {
		margin-top: 20rpx;
		background: white;

		.f-header {
			display        : flex;
			align-items    : center;
			justify-content: space-between;
			height         : 100rpx;
			padding        : 0 30rpx;

			.h-left {
				display    : flex;
				align-items: center;

				.l-text {
					text {
						font-size: 34rpx;
					}
				}

				.l-time {
					display     : flex;
					align-items : center;
					padding-left: 20rpx;

					.t-item {
						display        : flex;
						align-items    : center;
						justify-content: center;
						flex-basis     : 36rpx;
						height         : 36rpx;
						border-radius  : 5rpx;
						background     : #333;

						text {
							font-size: 24rpx;
							color    : white;
						}

						&:not(:first-child) {
							margin-left: 20rpx;
						}
					}
				}
			}

			.h-right {
				text {
					font-size: 34rpx;
				}
			}
		}

		.f-content {
			display  : flex;
			flex-wrap: wrap;
			padding  : 0 30rpx;

			.c-item {
				flex-basis    : 216rpx;
				padding-bottom: 30rpx;

				.i-image {
					width     : 100%;
					height    : 216rpx;
					background: #F5F5F5;

					image {
						width : 100%;
						height: 100%;
					}
				}

				.i-price {
					display    : flex;
					align-items: center;
					height     : 41rpx;
					margin-top : 10rpx;
				}

				&:not(:nth-child(3n+1)) {
					margin-left: 20rpx;
				}
			}
		}
	}

	.i-direct-supply {
		margin-top: 20rpx;
		background: white;

		.s-header {
			display        : flex;
			align-items    : center;
			justify-content: space-between;
			height         : 100rpx;
			padding        : 0 30rpx;

			.h-left {
				text {
					font-size: 34rpx;
				}
			}

			.h-right {
				text {
					font-size: 34rpx;
				}
			}
		}

		.s-content {
			display  : flex;
			flex-wrap: wrap;
			padding  : 0 30rpx 30rpx 30rpx;

			.c-item {
				position  : relative;
				flex-basis: 343rpx;
				height    : 260rpx;

				.i-desc {
					position      : absolute;
					top           : 25rpx;
					left          : 50%;
					transform     : translateX(-50%);
					display       : flex;
					flex-direction: column;
					align-items   : center;

					text {
						&:first-child {
							font-size: 34rpx;
							color    : #333;
						}

						&:last-child {
							font-size: 24rpx;
							color    : #7f7f7f;
						}
					}
				}

				image {
					width : 100%;
					height: 100%;
				}

				&:nth-child(2n+1) {
					margin-right: 8rpx;
				}

				&:nth-child(4n+1) {
					margin-bottom: 8rpx;
				}
			}
		}
	}

	.i-newest {
		margin-top: 20rpx;
		background: white;

		.n-header {
			display        : flex;
			align-items    : center;
			justify-content: space-between;
			height         : 100rpx;
			padding        : 0 30rpx;

			.h-left {
				text {
					font-size: 34rpx;
				}
			}

			.h-right {
				text {
					font-size: 34rpx;
				}
			}
		}

		.n-content {
			display  : flex;
			flex-wrap: wrap;
			padding  : 0 30rpx;

			.c-item {
				flex-basis    : 216rpx;
				padding-bottom: 30rpx;

				.i-image {
					width     : 100%;
					height    : 216rpx;
					background: #F5F5F5;

					image {
						width : 100%;
						height: 100%;
					}
				}

				.i-price {
					display    : flex;
					align-items: center;
					height     : 41rpx;
					margin-top : 10rpx;
				}

				&:not(:nth-child(3n+1)) {
					margin-left: 20rpx;
				}
			}
		}
	}
}